<template>
  <div class="home">
    <nav-header></nav-header>
 	 <div @click="clickNum('num1')">{{num1}}</div>
 	 <div @click="clickName">{{name1}}</div>
	  <div>{{data1.num2}}</div>
 	 <div>{{data1.name2}}</div>
      <el-input v-model="data1.num2"/>
	   <div>{{num3}}</div>
 	 <div>{{name3}}</div>
      <div>{{num1}}+{{data1.num2}}={{addNum}}</div>
      <button @click="add">add</button>
	<div>{{list}}</div>
    <button @click="goto">跳转路由</button>
    <button @click="paramsGoto">params带参数跳转路由</button>
    <button @click="queryGoto">query带参数跳转路由</button>
    <child :msg="msg" @send='send'></child>
     <div>{{msgVal}}</div>
  </div>
</template>
<script>

import NavHeader from '@/components/navHeader/NavHeader'
import NavMain from '@/components/navMain/NavMain'
import NavFooter from '@/components/navFooter/NavFooter'
import Child from '@/components/child/Child'
import {defineComponent,ref,reactive,toRefs,computed, onMounted} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  name:'Home',//组件名称
  //接收父组件点数据
  props:{
  },
  //定义子组件
  components:{
    NavHeader,
    NavMain,
    NavFooter,
    Child
  },
  setup(props,ctx){
     //先执行完setup,再执行onMounted
    onMounted(()=>{
        // 组件挂载的过程
        // 数据dom...
        // 发请求
        // 数据初始化的操作 接受路由传递的参数
        console.log('onMounted');
    })
    console.log('setup');
	let num1 = ref(10)
	let name1 = ref('ref')
	let data1 = reactive({
		name2:'reactive',
		num2 : 20
	})
	let data2 = reactive({
		name3:'toRefs',
		num3 : 30
	})
    let clickNum = (val) =>{
        console.log(val)
    }
    let clickName = () =>{
        console.log('点击了name')
    }
    let addNum = computed(()=>{
        // 必须返回一个值
        // 逻辑代码
        return num1.value + data1.num2
    })
    let add = ()=>{
        num1.value++
        data1.num2++
    }
    // store全局状态
     let store = useStore()
	 let list = computed(()=>{
		 return store.state.list
	 })
    //  router全局路由对象
     let router = useRouter()
     let goto=()=>{
        //  push是一个函数,里面可以直接传入跳转的路径
        //back 回到上一月
        //forward:去到下一页
        //go(int) 正数代表前进,负数代表后退
         router.push('/about')
     }
     let paramsGoto = () => {
        //  push 如果是传的对象的形式,就可以传递参数
        // query 传参
        //push里面还可以传入name name是路由名字
        //query传参path和name都可以
        //params传参只能用name
        // query传参,参数会拼接到路由路径上,并且刷新之后,参数依然保存
        //,params不会拼接到路由路径上,但是刷新之后,参数没有了
         router.push({
             name:'About',
             params:{
                 num1:num1.value,
                 num2:data1.num2,
                //  使用JSON.stringify(obj)将对象转成JSON字符串
                 obj:JSON.stringify(data2)
             }
         })
     }
     let queryGoto =() =>{
        router.push({
             path:'/about',
             query:{
                 num1:num1.value,
                 num2:data1.num2,
                //  使用JSON.stringify(obj)将对象转成JSON字符串
                 obj:JSON.stringify(data2)
             }
         })
     }
    let msg = ref('这是父组件点数据')
    let msgVal = ref('');
    let send = (val) =>{
        console.log(val);
       msgVal.value = val;
    }

    return{
		num1,
		name1,
		data1,
		...toRefs(data2),
        clickNum,
        clickName,
        addNum,
        add,
        list,
        goto,
        paramsGoto,
        queryGoto,
        msg,
        send,
        msgVal
    }
  }

})
</script>
<style scoped lang="scss">

</style>